<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#first {
			background: blue;
			width: 200px;
			height: 200px;
			margin: 100px auto 0;
		}
		#second {
			position: absolute;
			left: 50%;
			width: 200px;
			height: 200px;
			background-color: red;
		}
		#three {
			width: 200px;
			height: 200px;
			background: greenyellow;
			transition: 1s;
		}
	</style>
</head>
<body>
	<div id="first"></div>
	<div id="second"></div>
	<div id="three"></div>
</body>
</html>
<script>
	var firstDiv = document.getElementById('first');
	// 单击缩小两倍, 双击扩大两倍
	// 记录初始的大小
	var a = 1;
	// 防止单击与双击冲突, 我们加一个延迟定时器
	var timeOut;
	firstDiv.onclick = function() {
		if(timeOut) {
			// 清除定时器
			clearTimeout(timeOut);
		}
		timeOut = setTimeout(function() {
			console.log('单击');
			a /= 2;
			firstDiv.style.transform = 'scale(' + a + ',' + a + ')';
		}, 500)
	}
	firstDiv.ondblclick = function() {
		clearTimeout(timeOut);
		console.log('双击');
		a *= 2;
		firstDiv.style.transform = 'scale(' + a + ',' + a + ')';
	}
	// 鼠标右键
	document.oncontextmenu = function() {
		console.log('鼠标右击');
		// 通过return false; 去掉鼠标右键默认的效果
		return false;
	}



	// 红色div, 鼠标按下时可以拖动div, 鼠标抬起时不能拖动
	var redDiv = document.getElementById('second');
	console.log(redDiv)
	redDiv.onmousedown = function(event) {
		var x = event.clientX - redDiv.offsetLeft;
		var y = event.clientY - redDiv.offsetTop;
		document.onmousemove = function(event) {
			var xDiv = event.clientX - x;
			var yDiv = event.clientY - y;
			redDiv.style.left = xDiv + 'px';
			redDiv.style.top = yDiv + 'px';
		}
	}
	document.onmouseup = function() {
		document.onmousemove = null;
	}


	// 鼠标移动到绿色div上, div变为圆形, 离开后变为方形
	// 鼠标移动元素上面, onmouseover (会触发冒泡事件), onmouseenter(不会触发冒泡事件)
	// 鼠标移除元素上面, onmouseout(会触发冒泡事件), onmouseleave (不会触发冒泡)
	var threeDiv = document.getElementById('three');
	threeDiv.onmouseover = function() {
		threeDiv.style.cursor = 'positer';
		threeDiv.style.borderRadius = '100%';
	}
	threeDiv.onmouseout = function() {
		threeDiv.style.cursor = 'default';
		threeDiv.style.borderRadius = '0';
	}

</script>




























